<template>
    <div class="chat-container">
      <div class="chat-title">
        <img :src="customer.avatar" class="chat-avatar"/>
        <div class="chat-name">{{ customer.name }}</div>
      </div>
      <div class="chat-main" ref="scrollView">
        <div class="message-list" ref="messageList">
          <div v-if="history.loading" class="history-loading">
            <img src="../assets/images/pending.gif"/>
          </div>
          <div v-else :class="history.loaded ? 'history-loaded':'load'" @click="loadHistoryMessage(false)">
            {{ history.loaded ? '已经没有更多的历史消息' : '获取历史消息' }}
          </div>
          <div v-for="(message, index) in history.messages" :key="index">
            <div class="time-tips">{{ renderMessageDate(message, index) }}</div>
            <div class="message-item">
              <div v-if="message.type === 'CS_ACCEPT'" class="accept-message">
                {{ message.senderData.name }}已接入
              </div>
              <div v-else-if="message.type === 'CS_END'" class="accept-message">
                {{ message.senderData.name }}已结束会话
              </div>
              <div v-else-if="message.type === 'CS_TRANSFER'" class="accept-message">
                {{
                  message.senderId === currentAgent.id ? `已转接给` + message.payload.transferTo.data.name :
                    '已接入来自' + message.senderData.name + '的转接'
                }}
              </div>
              <div v-else :class="{ self: message.senderId !== customer.id }" class="message-item-content">
                <div class="sender-info">
                  <img :src="message.senderData.avatar" class="sender-avatar"/>
                  <div class="sender-name">
                    {{ message.senderData.name }}
                  </div>
                </div>
                <div class="message-content">
                  <div class="message-payload">
                    <div v-if="message.status === 'sending'" class="pending"></div>
                    <div v-if="message.status === 'fail'" class="send-fail"></div>
                    <div v-if="message.type === 'text'" class="content-text"
                         v-html="renderTextMessage(message.payload.text)"></div>
                    <div v-if="message.type === 'image'" class="content-image"
                         @click="showImagePreviewPopup(message.payload.url)">
                      <img :src="message.payload.url"
                           :style="{height:getImageHeight(message.payload.width,message.payload.height)+'px'}"/>
                    </div>
                    <div v-if="message.type ==='audio'" class="content-audio" @click="playAudio(message)">
                      <div class="audio-facade" :style="{width:Math.ceil(message.payload.duration)*7 + 50 + 'px'}">
                        <div class="audio-facade-bg" :class="{'play-icon':audioPlayer.playingMessage === message}"></div>
                        <div>{{ Math.ceil(message.payload.duration) || 1 }}<span>"</span></div>
                      </div>
                    </div>
                    <goeasy-video-player
                      v-if="message.type === 'video'"
                      :src="message.payload.video.url"
                      :thumbnail="message.payload.thumbnail"
                    />
                    <div v-if="message.type === 'order'" class="content-order">
                      <div class="order-id">订单号：{{ message.payload.id }}</div>
                      <div class="order-body">
                        <img :src="message.payload.url" class="order-img"/>
                        <div class="order-name">{{ message.payload.name }}</div>
                        <div>
                          <div class="order-price">{{ message.payload.price }}</div>
                          <div class="order-count">共{{ message.payload.count }}件</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chat-footer">
        <div v-if="customerStatus==null" class="accept-session">
          <div>离线中</div>
        </div>
        <div v-else-if="customerStatus.status==='PENDING'" class="accept-session">
          <div class="accept-info">
            会话已等待{{ pendingTime.duration }}
          </div>
          <button class="accept-btn" @click="acceptSession">立即接入</button>
        </div>
        <div v-else-if="customerStatus.status==='ACCEPTED' && currentAgent.id !== customerStatus.agent.id"
             class="accept-session">
          <div class="accept-info">{{ customerStatus.agent.data.name }}已接入</div>
        </div>
        <div v-else-if="customerStatus.status==='FREE'" class="accept-session">
          <button class="accept-btn" @click="acceptSession">主动接入</button>
        </div>
        <div v-else class="action-box">
          <div class="action-bar">
            <div class="chat-action">
              <!-- 表情 -->
              <div class="action-item">
                <div v-if="emoji.visible" class="emoji-box">
                  <img
                    v-for="(emojiItem, emojiKey, index) in emoji.map"
                    :key="index"
                    :src="emoji.url + emojiItem"
                    class="emoji-item"
                    @click="chooseEmoji(emojiKey)"
                  />
                </div>
                <i class="iconfont icon-smile" title="表情" @click="showEmojiBox"></i>
              </div>
              <!-- 图片 -->
              <div class="action-item">
                <label for="img-input">
                  <i class="iconfont icon-picture" title="图片"></i>
                </label>
                <input v-show="false" id="img-input" accept="image/*" multiple type="file"
                       @change="sendImageMessage"/>
              </div>
              <!-- 视频 -->
              <div class="action-item">
                <label for="video-input"><i class="iconfont icon-film" title="视频"></i></label>
                <input v-show="false" id="video-input" accept="video/*" type="file"
                       @change="sendVideoMessage"/>
              </div>
              <!-- 商品链接 -->
              <div class="action-item">
                <i class="iconfont icon-liebiao" title="订单" @click="showOrderMessageList"></i>
              </div>
            </div>
            <div class="session-action">
              <span class="transfer" @click="showTransferForm()">转接</span>
              <span class="transfer" @click="endSession()">结束会话</span>
            </div>
          </div>
          <div class="input-box">
            <textarea ref="input" @focus="onInputFocus" @keyup.enter="sendTextMessage" v-model="text" autocomplete="off" class="input-content"></textarea>
          </div>
          <div class="send-box">
            <button class="send-button" @click="sendTextMessage">发送</button>
          </div>
        </div>
      </div>
      <!-- 语音播放器 -->
      <audio ref="audioPlayer" @ended="onAudioPlayEnd" @pause="onAudioPlayEnd"></audio>
      <!-- 图片预览弹窗 -->
      <div v-if="imagePopup.visible" class="image-preview">
        <img :src="imagePopup.url" alt="图片"/>
        <span class="close" @click="hideImagePreviewPopup">×</span>
      </div>
      <!-- 转接弹窗 -->
      <div v-if="transferForm.visible" class="transfer-popup">
        <div class="transfer-model">
          <div v-if="transferForm.agents.length" class="transfer-content">
            <div v-for="(agent, index) in transferForm.agents" class="agent-info">
              <label class="agent-label">
                <input v-model="transferForm.to" :name="agent.data.name" :value="agent" type="radio"/>
                <img :src="agent.data.avatar" class="agent-avatar"/>
                <span class="agent-name">{{ agent.data.name }}</span>
              </label>
            </div>
          </div>
          <div v-else class="transfer-content">
            <div class="no-agent">-当前无其他客服在线-</div>
          </div>
          <div class="transfer-bottom">
            <span v-if="transferForm.agents.length" class="transfer-button" @click="transfer()">确认</span>
            <span class="transfer-button" @click="hideTransferForm()">取消</span>
          </div>
        </div>
      </div>
      <!-- 订单弹窗 -->
      <div v-if="orderList.visible" class="order-box">
        <div class="order-list">
          <div class="title">
            <div>请选择一个订单</div>
            <span @click="closeOrderMessageList">×</span>
          </div>
          <div v-for="(order, index) in orderList.orders" :key="index" class="order-item"
               @click="sendOrderMessage(order)">
            <div class="order-id">订单号：{{ order.id }}</div>
            <div class="order-body">
              <img :src="order.url" class="order-img"/>
              <div class="order-name">{{ order.name }}</div>
              <div>
                <div class="order-price">{{ order.price }}</div>
                <div class="order-count">共{{ order.count }}件</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount,nextTick } from 'vue';
  import { useRoute } from 'vue-router';
  import { formatDate, formateTime } from '../../utils/utils';
  import restApi from '../../api/restapi';
  import EmojiDecoder from '../../utils/EmojiDecoder';
  import  {useCounterStore} from '../../store/index';

  import GoEasy from 'goeasy';
// 在GoEasy配置中添加
const goEasy = GoEasy.getInstance({
  host: 'hangzhou.goeasy.io',
  appkey: 'BC-3b18447e8c3d45b0901e3fb6444dda37',
  modules: ['im'],
  allowReconnect: true,  // 启用自动重连
  reconnectInterval: 5000  // 5秒重试一次
});
  const IMAGE_MAX_WIDTH = 200;
  const IMAGE_MAX_HEIGHT = 150;
  
  const route = useRoute();
  
  // Emoji config
  const emojiUrl = 'https://xin.smallw.top/biao/';
  const emojiMap = {
    '[闭眼]': 'biyan.svg',
				'[大笑]': 'daxiao.svg',
				'[翻脸]': 'fanlian.svg',
				'[哈哈]': 'haha.svg',
				'[害羞]': 'haixiu.svg',
				'[金钱]': 'jinqian.svg',
				'[开心]': 'kaixin.svg',
				'[么么]': 'meme.svg',
				'[什么]': 'shenme.svg',
				'[栓Q]': 'shuanq.svg',
				'[天使]': 'tianshi.svg',
				'[微笑]': 'weixiao.svg',
				'[捂嘴笑]': 'wuzui.svg',
				'[嘻嘻]': 'xixi.svg',
				'[喜欢]': 'xihuan.svg',
				'[笑倒了]': 'xiaodao.svg',
				'[笑哭]': 'xiaoku.svg',
				'[星星眼]': 'xingxing.svg'
  };
  
  // Refs
  const scrollView = ref(null);
  const messageList = ref(null);
  const input = ref(null);
  const audioPlayer = ref(null);
  
  const currentAgent = ref(null);
  const csteam = ref(null);
  const customer = ref({
    // id: route.params.id,
    // name: route.query.name,
    // avatar: route.query.avatar,
    id:"",
    name:"",
    avatar:""
  });
  const customerStatus = ref(null);
  
  const to = ref({
    type: GoEasy.IM_SCENE.CS,
    id: customer.value.id,
    data: {name: customer.value.name, avatar: customer.value.avatar},
  });
  
  const history = ref({
    messages: [],
    loaded: false,
    loading: true
  });
  
  const text = ref('');
  const emoji = ref({
    url: emojiUrl,
    map: emojiMap,
    visible: false,
    decoder: new EmojiDecoder(emojiUrl, emojiMap),
  });
  
  const imagePopup = ref({
    visible: false,
    url: ''
  });
  
  const audioPlayerState = ref({
    playingMessage: null,
  });
  
  const orderList = ref({
    orders: [],
    visible: false,
  });
  
  const transferForm = ref({
    visible: false,
    agents: [],
    to: {}
  });
  
  const pendingTime = ref({
    timer: null,
    duration: ''
  });
  
  const connectGoEasy=()=> {
        let currentAgent = useCounterStore().currentAgent;
        goEasy.connect({
          id: currentAgent.id,
          data: {name: currentAgent.name, avatar: currentAgent.avatar},
          onSuccess: function () {  //连接成功
            console.log("GoEasy connect successfully.") //连接成功
          },
          onFailed: function (error) { //连接失败
            console.log("Failed to connect GoEasy, code:" + error.code + ",error:" + error.content);
          },
          onProgress: function (attempts) { //连接或自动重连中
            console.log("GoEasy is connecting", attempts);
          }
        });
      };
  // Initialize component
  onMounted(() => {
   
      // 获取全局数据
      currentAgent.value = useCounterStore().currentAgent;
    if (goEasy.getConnectionStatus() === 'disconnected') {
        connectGoEasy();  //连接goeasy
      }

    customer.value.id = route.params.id;
    customer.value.name=route.query.name;
    customer.value.avatar=route.query.avatar;
    to.value.id = customer.value.id;
    to.value.data.name = customer.value.name;
    to.value.data.avatar = customer.value.avatar;
    // 初始化csteam
    csteam.value = goEasy.im.csteam(currentAgent.value.shopId);
    // 监听客户
    listenCustomer();
    // 加载历史消息
    csteam.value = goEasy.im.csteam(currentAgent.value.shopId);
    
    listenCustomer();
    loadHistoryMessage(true);
  });
  
  onBeforeUnmount(() => {
    csteam.value.cancelListenCustomer({
      onSuccess: () => {
        console.log('cancelListenCustomer successfully ');
  
        
      },
      onFailed: (error) => {
        console.log('failed to cancelListenCustomer:', error);
      },
    });
    
    if (pendingTime.value.timer) {
      clearInterval(pendingTime.value.timer);
    }
  });
  
  // Methods
  const renderTextMessage = (text) => {
    return emoji.value.decoder.decode(text);
  };
  
  // 监听客户
  const listenCustomer = () => {
    // 调用csteam的listenCustomer方法，传入客户id，成功回调，失败回调，状态更新回调，新消息回调
    csteam.value.listenCustomer({
      id: customer.value.id,
      onSuccess: () => {
        // 成功回调，打印成功信息，标记消息为已读
        console.log('listen customer successfully');
        markMessageAsRead();
      },
      onFailed: (error) => {
        // 失败回调，打印失败信息
        console.log('failed to listen customer:', error);
      },
      onStatusUpdated: (status) => {
        // 状态更新回调，更新客户状态
        customerStatus.value = status;
        // 如果状态为PENDING，更新待处理时间
        if (status.status === 'PENDING') {
          updatePendingTime(status.start);
        }
      },
      onNewMessage: (message) => {
        // 新消息回调，接收新消息
        onReceivedMessage(message);
      },
    });
  };
  
  const updatePendingTime = (time) => {
    pendingTime.value.duration = formateTime(time);
    clearInterval(pendingTime.value.timer);
    pendingTime.value.timer = setInterval(() => {
      pendingTime.value.duration = formateTime(time);
    }, 1000);
  };
  
  const onReceivedMessage = (newMessage) => {
    if (history.value.messages.some(message => newMessage.id === message.messageId)) {
      return;
    }
    history.value.messages.push(newMessage);
    markMessageAsRead();
   
      scrollView.value.scrollTop = messageList.value.scrollHeight;
    
  };
  
  const markMessageAsRead = () => {
    csteam.value.markMessageAsRead({
      type: GoEasy.IM_SCENE.CS,
      id: customer.value.id,
      onSuccess: () => {
        console.log('标记已读成功');
      },
      onFailed: (error) => {
        console.log('标记已读失败', error);
      }
    });
  };
  
  const loadHistoryMessage = (scrollToBottom) => {
    history.value.loading = true;
    let lastMessageTimeStamp;
    let lastMessage = history.value.messages[0];
    if (lastMessage) {
      lastMessageTimeStamp = lastMessage.timestamp;
    }
    let limit = 10;
    
    csteam.value.history({
      id: customer.value.id,
      type: GoEasy.IM_SCENE.CS,
      lastTimestamp: lastMessageTimeStamp,
      limit: limit,
      onSuccess: (result) => {
        history.value.loading = false;
        let messages = result.content;
        
        if (messages.length === 0) {
          history.value.loaded = true;
        } else {
          if (lastMessageTimeStamp) {
            history.value.messages = messages.concat(history.value.messages);
          } else {
            history.value.messages = messages;
          }
          
          if (messages.length < 10) {
            history.value.allLoaded = true;
          }
          
          if (scrollToBottom) {
            
      scrollView.value.scrollTop = messageList.value.scrollHeight;

          }
        }
      },
      onFailed: (error) => {
        history.value.loading = false;
        console.log('获取历史消息失败, code:' + error.code + ',错误信息:' + error.content);
      },
    });
  };
  
  const getImageHeight = (width, height) => {
    if (width < IMAGE_MAX_WIDTH && height < IMAGE_MAX_HEIGHT) {
      return height;
    } else if (width > height) {
      return IMAGE_MAX_WIDTH / width * height;
    } else if (width === height || width < height) {
      return IMAGE_MAX_HEIGHT;
    }
  };
  
  const playAudio = (audioMessage) => {
    let playingMessage = audioPlayerState.value.playingMessage;
  
    if (playingMessage) {
      audioPlayer.value.pause();
      if (playingMessage === audioMessage) {
        return;
      }
    }
  
    audioPlayerState.value.playingMessage = audioMessage;
    audioPlayer.value.src = audioMessage.payload.url;
    audioPlayer.value.load();
    audioPlayer.value.currentTime = 0;
    audioPlayer.value.play();
  };
  
  const onAudioPlayEnd = () => {
    audioPlayerState.value.playingMessage = null;
  };
  
  const renderMessageDate = (message, index) => {
    if (index === 0) {
      return formatDate(message.timestamp);
    } else {
      if (message.timestamp - history.value.messages[index - 1].timestamp > 5 * 60 * 1000) {
        return formatDate(message.timestamp);
      }
    }
    return '';
  };
  
  const showImagePreviewPopup = (url) => {
    imagePopup.value.visible = true;
    imagePopup.value.url = url;
  };
  
  const hideImagePreviewPopup = () => {
    imagePopup.value.visible = false;
  };
  
  const isOnline = () => {
    return new Promise((resolve, reject) => {
      csteam.value.isOnline({
        onSuccess: (result) => {
          resolve(result);
        },
        onFailed: (error) => {
          console.log('获取在线状态失败，error:', error);
          reject(error);
        }
      });
    });
  };
  
  const acceptSession = async () => {
    if (await isOnline()) {
      csteam.value.accept({
        customer: {
          id: customer.value.id,
          data: {
            name: customer.value.name,
            avatar: customer.value.avatar
          }
        },
        onSuccess: () => {
          console.log('accept successfully.');
          clearInterval(pendingTime.value.timer);
        },
        onFailed: (error) => {
          console.log('accept failed', error);
        }
      });
    } else {
      alert('您还不是一名该团队的在线客服，请点击左下角头像进行上线操作');
    }
  };
  
  const endSession = () => {
    csteam.value.end({
      id: customer.value.id,
      onSuccess: () => {
        console.log('end successfully.');
      },
      onFailed: (error) => {
        console.log('end failed', error);
      }
    });
  };
  
  // 定义一个函数，用于显示转移表单
  const showTransferForm = () => {
    // 调用csteam.value.agents方法，获取在线的代理
    csteam.value.agents({
      // 成功回调函数
      onSuccess: (result) => {
        // 将转移表单的可见性设置为true
        transferForm.value.visible = true;
        transferForm.value.agents = result.content.filter((agent) => {
          return agent.id !== currentAgent.value.id;
        });
      },
      onFailed: (error) => {
        console.log('query online agents failed', error);
      }
    });
  };
  
  // 定义一个transfer函数
  const transfer = () => {
    // 调用csteam的transfer方法，传入customerId和agentId
    csteam.value.transfer({
      customerId: customer.value.id,
      agentId: transferForm.value.to.id,
      // 成功回调函数
      onSuccess: () => {
        // 将transferForm的visible属性设置为false
        transferForm.value.visible = false;
        // 打印成功信息
        console.log('transfer successfully.');
      },
      // 失败回调函数
      onFailed: (error) => {
        // 打印失败信息
        console.log('transfer failed', error);
      }
    });
  };
  
  const hideTransferForm = () => {
    transferForm.value.visible = false;
  };
  
  const onInputFocus = () => {
    emoji.value.visible = false;
  };
  
  const showEmojiBox = () => {
    emoji.value.visible = !emoji.value.visible;
  };
  
  const chooseEmoji = (emojiKey) => {
    text.value += emojiKey;
    emoji.value.visible = false;
  };
  
  // 发送文本消息
  const sendTextMessage = () => {
    // 如果输入为空，则打印提示信息并返回
    if (text.value.trim().length === 0) {
      console.log('输入为空');
      return;
    }
    
    // 创建文本消息
    csteam.value.createTextMessage({
      text: text.value, // 消息内容
      to: to.value, // 接收者
      onSuccess: (message) => {
        // 发送消息成功，调用sendMessage函数发送消息
        sendMessage(message);
        // 清空输入框
        text.value = '';
      },
      onFailed: (err) => {
        // 发送消息失败，打印错误信息
        console.log("创建消息err:", err);
      }
    });
  };
  
  const sendImageMessage = (e) => {
    let fileList = [...e.target.files];
    fileList.forEach((file) => {
      csteam.value.createImageMessage({
        file: file,
        to: to.value,
        onProgress: (progress) => {
          console.log(progress);
        },
        onSuccess: (message) => {
          sendMessage(message);
        },
        onFailed: (e) => {
          console.log('error :', e);
        }
      });
    });
  };
  
  const sendVideoMessage = (e) => {
    const file = e.target.files[0];
    csteam.value.createVideoMessage({
      file: file,
      to: to.value,
      onProgress: (progress) => {
        console.log(progress);
      },
      onSuccess: (message) => {
        sendMessage(message);
      },
      onFailed: (e) => {
        console.log('error :', e);
      }
    });
  };
  
  const closeOrderMessageList = () => {
    orderList.value.visible = false;
  };
  
  const showOrderMessageList = () => {
    orderList.value.orders = restApi.getOrderList();
    orderList.value.visible = true;
  };
  
  const sendOrderMessage = (order) => {
    orderList.value.visible = false;
    csteam.value.createCustomMessage({
      type: 'order',
      payload: order,
      to: to.value,
      onSuccess: (message) => {
        sendMessage(message);
      },
      onFailed: (err) => {
        console.log("创建消息err:", err);
      }
    });
  };
  
  const sendMessage = (message) => {
    history.value.messages.push(message);
  
      scrollView.value.scrollTop = messageList.value.scrollHeight;
 
    goEasy.im.sendMessage({
      message: message,
      onSuccess: (message) => {
        console.log('发送成功', message);
      },
      onFailed: (error) => {
        if (error.code === 507) {
          alert('发送语音/图片/视频/文件失败，没有配置OSS存储');
          console.log('发送语音/图片/视频/文件失败，没有配置OSS存储，详情参考：https://docs.goeasy.io/2.x/im/message/media/alioss');
        } else {
          console.log('发送失败:', error);
        }
      }
    });
  };
  
 
  </script>
  
  <style scoped>
  /* Your existing styles remain the same */
  .chat-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .chat-title {
    height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 18px;
  }
  
  .chat-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
  }
  
  .chat-name {
    width: 400px;
    margin-left: 10px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  
  .chat-main {
    height: 500px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
  }
  
  .chat-main::-webkit-scrollbar {
    width: 0;
  }
  
  .chat-main .message-list {
    padding: 0 15px;
  }
  
  .chat-main .history-loaded {
    text-align: center;
    font-size: 12px;
    color: #cccccc;
    cursor: pointer;
    line-height: 20px;
  }
  
  .chat-main .load {
    text-align: center;
    font-size: 12px;
    color: #d02129;
    line-height: 20px;
    cursor: pointer;
  }
  
  .history-loading {
    width: 100%;
    text-align: center;
  }
  
  .time-tips {
    color: #999;
    text-align: center;
    font-size: 12px;
  }
  
  .message-list {
    padding: 0 10px;
  }
  
  .message-item {
    display: flex;
  }
  
  .accept-message {
    width: 100%;
    text-align: center;
    color: #606164;
    line-height: 25px;
  }
  
  .message-item-content {
    flex: 1;
    margin: 5px 0;
    overflow: hidden;
    display: flex;
  }
  
  .sender-info {
    margin: 0 5px;
  }
  
  .sender-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
  }
  
  .sender-name {
    color: #606164;
    text-align: center;
  }
  
  .message-content {
    max-width: calc(100% - 100px);
  }
  
  .message-payload {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  
  .pending {
    background: url("../assets/images/pending.gif") no-repeat center;
    background-size: 13px;
    width: 15px;
    height: 15px;
  }
  
  .send-fail {
    background: url("../assets/images/failed.png") no-repeat center;
    background-size: 13px;
    width: 15px;
    height: 15px;
  }
  
  .content-text {
    display: flex;
    align-items: center;
    text-align: left;
    background: #eeeeee;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 8px;
    margin: 3px 0;
    line-height: 25px;
    white-space: pre-line;
    overflow-wrap: anywhere;
    border-radius: 8px;
    word-break: break-all;
    flex-wrap: wrap;
  }
  
  .content-image {
    display: block;
    cursor: pointer;
  }
  
  .content-image img {
    height: 100%;
  }
  
  .content-audio {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .content-audio .audio-facade {
    min-width: 12px;
    background: #eeeeee;
    border-radius: 7px;
    display: flex;
    font-size: 14px;
    padding: 8px;
    margin: 5px 0;
    line-height: 25px;
    cursor: pointer;
  }
  
  .content-audio .audio-facade-bg {
    background: url("../assets/images/voice.png") no-repeat center;
    background-size: 15px;
    width: 20px;
  }
  
  .content-audio .audio-facade-bg.play-icon {
    background: url("../assets/images/play.gif") no-repeat center;
    background-size: 20px;
  }
  
  .content-order {
    border-radius: 5px;
    border: 1px solid #eeeeee;
    padding: 8px;
    display: flex;
    flex-direction: column;
  }
  
  .content-order .order-id {
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
  }
  
  .content-order .order-body {
    display: flex;
    font-size: 13px;
    padding: 5px;
  }
  
  .content-order .order-img {
    width: 70px;
    height: 70px;
    border-radius: 5px;
  }
  
  .content-order .order-name {
    margin-left: 10px;
    width: 135px;
    color: #606164;
  }
  
  .content-order .order-count {
    font-size: 12px;
    color: #666666;
    flex: 1;
  }
  
  .message-item .self {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
  }
  
  .message-item .self::v-deep(.play-icon) {
    background: url("../assets/images/play.gif") no-repeat center;
    background-size: 20px;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  
  .chat-footer {
    border-top: 1px solid #dcdfe6;
    width: 100%;
    height: 140px;
    background: #FFFFFF;
  }
  
  .action-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .action-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .action-bar .iconfont {
    font-size: 22px;
    margin: 0 10px;
    z-index: 3;
    color: #606266;
    cursor: pointer;
  }
  
  .action-bar .iconfont:focus {
    outline: none;
  }
  
  .action-bar .iconfont:hover {
    color: #d02129;
  }
  
  .chat-action {
    display: flex;
    flex-direction: row;
    padding: 0 10px;
  }
  
  .action-bar .action-item {
    text-align: left;
    padding: 10px 0;
    position: relative;
  }
  
  .emoji-box {
    width: 210px;
    position: absolute;
    top: -111px;
    left: -11px;
    z-index: 2007;
    background: #fff;
    border: 1px solid #ebeef5;
    padding: 12px;
    text-align: justify;
    font-size: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    word-break: break-all;
    border-radius: 4px;
  }
  
  .emoji-item {
    width: 38px;
    height: 38px;
    margin: 0 2px;
  }
  
  .session-action {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .session-action .transfer {
    cursor: pointer;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    width: 70px;
      height: 30px;
      font-size: 15px;
      border: 1px solid #d02129;
      background-color: #ffffff;
      color: #d02129;
      border-radius: 5px;
    }
  
    .input-box {
      flex: 1;
      padding: 5px 15px;
    }
  
    .input-content {
      border: none;
      resize: none;
      display: block;
      width: 90%;
      color: #606266;
      outline: none;
      background: #FFFFFF;
      word-break: break-all;
    }
  
    .send-box {
      padding: 5px 10px;
      text-align: right;
    }
  
    .send-button {
      width: 70px;
      height: 30px;
      font-size: 15px;
      border: 1px solid #d02129;
      background-color: #ffffff;
      color: #d02129;
      border-radius: 5px;
      cursor: pointer;
    }
  
    .accept-session {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .accept-info {
      font-size: 18px;
      color: #d02129;
      margin-bottom: 10px;
    }
  
    .accept-btn {
      width: 75px;
      height: 30px;
      font-size: 15px;
      border: 1px solid #d02129;
      background-color: #ffffff;
      color: #d02129;
      border-radius: 5px;
      cursor: pointer;
    }
  
    .image-preview {
      max-width: 750px;
      max-height: 500px;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9998;
    }
  
    .image-preview img {
      max-width: 750px;
      max-height: 500px;
    }
  
    .image-preview .close {
      font-size: 50px;
      line-height: 24px;
      cursor: pointer;
      color: #FFFFFF;
      position: absolute;
      top: 10px;
      right: 5px;
      z-index: 1002;
    }
  
    .transfer-popup {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(33, 33, 33, 0.7);
    }
  
    .transfer-model {
      width: 450px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      padding: 5px;
      border: 1px solid gainsboro;
      border-radius: 4px;
      text-align: center;
      background: #ffffff;
    }
  
    .transfer-content {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  
    .no-agent {
      flex: 1;
    }
  
    .agent-info {
      width: 110px;
      padding: 20px;
    }
  
    .agent-label {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  
    .agent-avatar {
      width: 35px;
      height: 35px;
      margin: 0 5px;
    }
  
    .agent-name {
      font-size: 14px;
      word-break: break-all;
    }
  
    .transfer-bottom {
      height: 50px;
      display: flex;
      margin: 0 50px;
      align-items: center;
      justify-content: space-around;
    }
  
    .transfer-button {
      display: inline-block;
      padding: 8px 15px;
      font-size: 13px;
      border: 1px solid #d02129;
      color: #d02129;
      border-radius: 4px;
      cursor: pointer;
    }
  
    .order-box {
      width: 848px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2007;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(33, 33, 33, 0.7);
    }
  
    .order-list {
      width: 300px;
      background: #F1F1F1;
      border-radius: 5px;
    }
  
    .order-list .title {
      font-weight: 600;
      font-size: 15px;
      color: #000000;
      margin-left: 10px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .order-list .title span {
      font-size: 28px;
      font-weight: 400;
      cursor: pointer;
    }
  
    .order-list .order-item {
      padding: 10px;
      background: #FFFFFF;
      margin: 10px;
      border-radius: 5px;
      cursor: pointer;
    }
  
    .order-list .order-id {
      font-size: 12px;
      color: #666666;
      margin-bottom: 5px;
    }
  
    .order-list .order-body {
      display: flex;
      font-size: 13px;
      justify-content: space-between;
    }
  
    .order-list .order-img {
      width: 50px;
      height: 50px;
      border-radius: 5px;
    }
  
    .order-list .order-name {
      width: 160px;
    }
  
    .order-list .order-count {
      font-size: 12px;
      color: #666666;
      flex: 1;
    }
  </style>